<template>
  <div>
    <div class="content">
      <div class="container">
        <ul>
          <li @click="num=0" :class="{active:num==0}" class="fl">在库专家
          </li>
          <span></span>
          <li @click="num=1" :class="{active:num==1}" class="fr">专家</li>
        </ul>
        <div class="denglu">
          <div class="zaiku_login" v-show="num==0">
            <el-form ref="zaikuloginFormRef" :model="zaikuloginForm" :rules="zaikuloginFormRules" label-width="0px" class="login_form">
              <!-- 用户名 -->
              <el-form-item prop="username">
                <el-input v-model="zaikuloginForm.username" prefix-icon="el-icon-user-solid" placeholder="用户名"></el-input>
              </el-form-item>
              <!-- 密码 -->
              <el-form-item prop="password">
                <el-input v-model="zaikuloginForm.password" prefix-icon="el-icon-lock" type="password" placeholder="密码"></el-input>
              </el-form-item>
              <!-- 按钮区域 -->
              <el-form-item class="btns">
                <el-button type="primary" @click="zaiku_login">登录</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="zhuanjia_login" v-show="num==1">
            <el-form ref="zhuanjialoginFormRef" :model="zhuanjialoginloginForm" :rules="zhuanjialoginFormRules" label-width="0px" class="login_form">
              <!-- 用户名 -->
              <el-form-item prop="username">
                <el-input v-model="zhuanjialoginloginForm.username" prefix-icon="el-icon-user-solid" placeholder="专家用户名"></el-input>
              </el-form-item>
              <!-- 密码 -->
              <el-form-item prop="password">
                <el-input v-model="zhuanjialoginloginForm.password" prefix-icon="el-icon-lock" type="password" placeholder="密码"></el-input>
              </el-form-item>
              <!-- 按钮区域 -->
              <el-form-item class="btns">
                <el-button type="primary" @click="zhuanjia_login">登录</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>

        <div class="text">
          <p>专家登录：
            <a href="">采购类项目</a>
            请用专家登录
          </p>
          <p>在库专家登录：
            <a href="">工程类项目</a>
            请用在库专家登录
          </p>
        </div>
      </div>
    </div>

    <div class="biaoduan">
      <div class="xuanze">
        <p>已选择标段</p>
      </div>
      <div class="biaoduan_list">
        <ul>
          <li v-for="item in list">{{item}}</li>
        </ul>
      </div>
    </div>

    <div class="diqu">
     <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="石家庄市" name="shi">
        <p>选择地区：</p>
        <ul>
          <li>桥东区</li>
          <li>长安区</li>
          <li>桥西区</li>
          <li>新华区</li>
          <li>桥东区</li>
          <li>井陉矿区</li>
          <li>井陉县</li>
          <li>正定县</li>
          <li>栾城县</li>
          <li>行唐县</li>
          <li>灵寿县</li>
          <li>高邑县</li>
          <li>深泽县</li>
          <li>赞皇县</li>
          <li>无极县</li>
          <li>平山县</li>
          <li>元氏县</li>
          <li>赵县</li>
          <li>辛集市</li>
          <li>藁城市</li>
          <li>晋州市</li>
          <li>新乐市</li>
          <li>鹿泉市</li>
          <li>其它区</li>
        </ul>
      </el-tab-pane>
      <el-tab-pane label="唐山市" name="tang">
        <p>选择地区：</p>
        <ul>
          <li>路南区</li>
          <li>路北区</li>
          <li>古冶区</li>
          <li>开平区</li>
          <li>丰南区</li>
          <li>丰润区</li>
          <li>滦县</li>
          <li>滦南县</li>
          <li>乐亭县</li>
          <li>迁西县</li>
          <li>玉田县</li>
          <li>唐海县</li>
          <li>遵化市</li>
          <li>迁安市</li>
          <li>其它区</li>
        </ul>
      </el-tab-pane>
      <el-tab-pane label="秦皇岛市" name="qin">
        <p>选择地区：</p>
        <ul>
          <li>海港区</li>
          <li>山海关区</li>
          <li>北戴河区</li>
          <li>青龙满族自治县</li>
          <li>昌黎县</li>
          <li>抚宁县</li>
          <li>卢龙县</li>
          <li>其它区</li>
          <li>经济技术开发区</li>
        </ul>
      </el-tab-pane>
      <el-tab-pane label="邯郸市" name="han">
        <p>选择地区：</p>
        <ul>
          <li>邯山区</li>
          <li>丛台区</li>
          <li>复兴区</li>
          <li>峰峰矿区</li>
          <li>邯郸县</li>
          <li>临漳县</li>
          <li>成安县</li>
          <li>大名县</li>
          <li>涉县</li>
          <li>磁县</li>
          <li>肥乡县</li>
          <li>永年县</li>
          <li>邱县</li>
          <li>鸡泽县</li>
          <li>广平县</li>
          <li>馆陶县</li>
          <li>魏县</li>
          <li>曲周县</li>
          <li>武安市</li>
          <li>其它区</li>
        </ul>
      </el-tab-pane>
      <el-tab-pane label="邢台市" name="xing">
        <p>选择地区：</p>
        <ul>
          <li>桥东区</li>
          <li>桥西区</li>
          <li>邢台县</li>
          <li>临城县</li>
          <li>内丘县</li>
          <li>柏乡县</li>
          <li>隆尧县</li>
          <li>任县</li>
          <li>南和县</li>
          <li>宁晋县</li>
          <li>巨鹿县</li>
          <li>新河县</li>
          <li>广宗县</li>
          <li>平乡县</li>
          <li>威县</li>
          <li>清河县</li>
          <li>临西县</li>
          <li>南宫市</li>
          <li>沙河市</li>
          <li>其它区</li>
        </ul>
      </el-tab-pane>
      <el-tab-pane label="保定市" name="bao">
        <p>选择地区：</p>
        <ul>
          <li>新市区</li>
          <li>北市区</li>
          <li>南市区</li>
          <li>满城县</li>
          <li>清苑县</li>
          <li>涞水县</li>
          <li>阜平县</li>
          <li>徐水县</li>
          <li>定兴县</li>
          <li>唐县</li>
          <li>高阳县</li>
          <li>容城县</li>
          <li>涞源县</li>
          <li>望都县</li>
          <li>安新县</li>
          <li>易县</li>
          <li>曲阳县</li>
          <li>蠡县</li>
          <li>顺平县</li>
          <li>博野县</li>
          <li>雄县</li>
          <li>涿州市</li>
          <li>定州市</li>
          <li>安国市</li>
          <li>高碑店市</li>
          <li>高开区</li>
          <li>其它区</li>
        </ul>
      </el-tab-pane>
      <el-tab-pane label="张家口市" name="zhang">
        <p>选择地区：</p>
        <ul>
          <li>桥东区</li>
          <li>桥西区</li>
          <li>宣化区</li>
          <li>下花园区</li>
          <li>宣化县</li>
          <li>张北县</li>
          <li>康保县</li>
          <li>沽源县</li>
          <li>尚义县</li>
          <li>蔚县</li>
          <li>阳原县</li>
          <li>怀安县</li>
          <li>万全县</li>
          <li>怀来县</li>
          <li>涿鹿县</li>
          <li>赤城县</li>
          <li>崇礼县</li>
          <li>其它区</li>
        </ul>
      </el-tab-pane>
      <el-tab-pane label="承德市" name="cheng">
        <p>选择地区：</p>
        <ul>
          <li>双桥区</li>
          <li>双滦区</li>
          <li>鹰手营子矿区</li>
          <li>承德县</li>
          <li>兴隆县</li>
          <li>平泉县</li>
          <li>滦平县</li>
          <li>隆化县</li>
          <li>丰宁满族自治县</li>
          <li>宽城满族自治县</li>
          <li>围场满族蒙古族自治县</li>
          <li>其它区</li>
        </ul>
      </el-tab-pane>
      <el-tab-pane label="沧州市" name="cang">
        <p>选择地区：</p>
        <ul>
          <li>新华区</li>
          <li>运河区</li>
          <li>沧县</li>
          <li>青县</li>
          <li>东光县</li>
          <li>海兴县</li>
          <li>盐山县</li>
          <li>肃宁县</li>
          <li>南皮县</li>
          <li>吴桥县</li>
          <li>献县</li>
          <li>孟村回族自治县</li>
          <li>泊头市</li>
          <li>任丘市</li>
          <li>黄骅市</li>
          <li>河间市</li>
          <li>其它区</li>
        </ul>
      </el-tab-pane>
      <el-tab-pane label="廊坊市" name="lang">
        <p>选择地区：</p>
        <ul>
          <li>安次区</li>
          <li>广阳区</li>
          <li>固安县</li>
          <li>永清县</li>
          <li>香河县</li>
          <li>大城县</li>
          <li>文安县</li>
          <li>大厂回族自治县</li>
          <li>开发区</li>
          <li>燕郊经济技术开发区</li>
          <li>霸州市</li>
          <li>三河市</li>
          <li>其它区</li>
        </ul>
      </el-tab-pane>
      <el-tab-pane label="衡水市" name="heng">
        <p>选择地区：</p>
        <ul>
          <li>桃城区</li>
          <li>枣强县</li>
          <li>武邑县</li>
          <li>武强县</li>
          <li>饶阳县</li>
          <li>安平县</li>
          <li>故城县</li>
          <li>景县</li>
          <li>阜城县</li>
          <li>冀州市</li>
          <li>深州市</li>
          <li>其它区</li>
        </ul>
      </el-tab-pane>
    </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      num:0,
      numm:0,
      zaikuloginForm:{
        username:'admin',
        password:'123456'
      },
      zhuanjialoginloginForm:{
        username:'zhuanjia',
        password:'123456'
      },
      // 这是表单的验证规则对象
      zaikuloginFormRules:{
        username:[
          { required: true, message: '请输入用户名', trigger: 'blur'},
        ],
        password:[
          { required: true, message: '请输入密码', trigger: 'blur'},
        ]
      },
      zhuanjialoginFormRules:{
        username:[
          { required: true, message: '请输入用户名', trigger: 'blur'},
        ],
        password:[
          { required: true, message: '请输入密码', trigger: 'blur'},
        ]
      },
      list:['赵县2020年“气代煤”工程超任务户安全技术评估服务项目第一标段',
      '赵县2020年“气代煤”工程超任务户安全技术评估服务项目第二标段',
      '赵县2020年“气代煤”工程超任务户安全技术评估服务项目第三标段'],
      activeName: 'shi',
    }
  },
  methods:{
    zaiku_login(){
      this.$refs.zaikuloginFormRef.validate(async valid => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
        // 2.通过编程式导航跳转到后台主页，路由地址是/home
        // this.$router.push('/home')
      })
    },
    zhuanjia_login(){
      this.$refs.zhuanjialoginFormRef.validate(async valid => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
        // 2.通过编程式导航跳转到后台主页，路由地址是/home
        // this.$router.push('/home')
      })
    },
    handleClick(tab, event) {
      
    }
  }
}
</script>

<style lang="less" scoped>
// @import url("../../assets/css/base.css");
  .content{
    width: 26%;
    height: 300px;
    border: 1px solid red;
    margin: 0 auto;
    margin-top: 30px;
  }
  .container{
    width: 70%;
    height: 95%;
    // border: 1px solid red;
    margin: 0 auto;
    margin-top: 5%;
      ul .active{
        color: rgb(2,148,200);
      }
      ul{
        width: 70%;
        height: 30px;
        // border: 1px solid blue;
        margin: 0 auto;
        // display: flex;
          li{
            // flex: 1;
            width: 46%;
            line-height: 30px;
            text-align: center;
            font-size: 22px;
          }
          li:first-child{
            width: 60%;
          }
          li:last-child{
            width: 37%;
          }
          span{
            display: inline-block;
            width: 2px;
            height: 100%;
            background-color: #333;
          }
      }
  }
  .denglu{
    width: 100%;
    height: 65%;
    margin: 0 auto;
    margin-top: 5%;
    // border: 1px solid black;
  }
  .el-button{
    width: 100%;
    border-radius: 15px;
  }
  .zaiku_login{
    width: 100%;
    height: 100%;
  }
  .zhuanjia_login{
    width: 100%;
    height: 100%;
  }
  .text{
    width: 100%;
    height: 18%;
    font-size: 14px;
  }

  .biaoduan{
    width: 40%;
    height: 200px;
    margin: 0 auto;
    margin-top: 30px;
    border: 1px solid red;
  }
  .xuanze{
    width: 100%;
    height: 20%;
    margin: 0 auto;
    display: table;
    background: url() no-repeat;
    background-size: 100% 100%;
      p{
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        font-size: 18px;
        color: rgb(2,129,180);
      }
  }
  .biaoduan_list{
    width: 86%;
    height: auto;
    margin: 0 auto;
    margin-top: 1%;
    // border: 1px solid black;
  }
  .biaoduan_list li{
    height: 30px;
  }

  .diqu{
    width: 70%;
    height: 200px;
    border: 1px solid red;
    margin: 0 auto;
    margin-top: 30px;
      p{
        padding-left: 20px;
      }
      ul li{
        list-style: none;
        float: left;
        width: 10%;
        height: 30px;
        text-align: center;
        line-height: 30px;
        margin-left: 10px;
        margin-top: 10px;
        color: #333;
        background-color: rgb(243,244,246);
        overflow: hidden;
      }
      li:hover{
        color: #fff;
        background-color: rgb(0,97,197);
      }
  }
  
</style>